﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>训练素材上传</title>
    <link rel="stylesheet" href="/plugin/vant/index.css" />
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="/plugin/vant/vue.min.js"></script>
    <script src="/plugin/vant/vant.min.js"></script>

    <link rel="stylesheet" href="/plugin/element/element.css">
    <script src="/plugin/element/element.js"></script>


    <style>

    </style>
</head>

<body>
    <div id="app">

        <el-form ref="form" :model="form" label-width="80px" style="margin-top: 20px;">
            <el-form-item label="品牌型号">
                <el-autocomplete class="inline-input" v-model="data.model" :fetch-suggestions="querySearch"
                    style="width: 280px;" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
            </el-form-item>

            <el-form-item label="铭牌照片">
                <van-field name="uploader" label="">
                    <template #input>
                        <van-uploader v-model="uploader1" :multiple="true" :max-count="count" :after-read="afterRead1"
                            @delete="handleDelete1" />
                    </template>
                </van-field>
            </el-form-item>
            <el-form-item label="标志标识">
                <van-field name="uploader" label="">
                    <template #input>
                        <van-uploader v-model="uploader2" :multiple="true" :max-count="count" :after-read="afterRead2"
                            @delete="handleDelete2" />
                    </template>
                </van-field>
            </el-form-item>

            <el-form-item label="灭火器">
                <van-field name="uploader" label="">
                    <template #input>
                        <van-uploader v-model="uploader3" :multiple="true" :max-count="count" :after-read="afterRead3"
                            @delete="handleDelete3" />
                    </template>
                </van-field>
            </el-form-item>

        
            <el-form-item label="农机外观">
                <van-field name="uploader" label="">
                    <template #input>
                        <van-uploader v-model="uploader4" :multiple="true" :max-count="count" :after-read="afterRead4"
                            @delete="handleDelete4" />
                    </template>
                </van-field>
            </el-form-item>

            <el-form-item label="车牌照片">
                <van-field name="uploader" label="">
                    <template #input>
                        <van-uploader v-model="uploader5" :multiple="true" :max-count="count" :after-read="afterRead5"
                            @delete="handleDelete5" />
                    </template>
                </van-field>
            </el-form-item>



            <el-form-item label="">
                <el-button type="primary" @click="insert" style="width:250px">提交</el-button>
            </el-form-item>

        </el-form>


    </div>
</body>
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
<script src="/plugin/layer/layer.js"></script>
<script>
    Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };

    var vm = new Vue({
        el: "#app",
        data: {
            info: "",
            date: "",
            show: false,
            form: {},
            data: {
                type: "",
                model: "",

            },
            count: 9,
            columns: [],
            modellist: [],
            showPicker: false,
            showPicker1: false,
            minDate: new Date(2023, 0, 1),
            uploader1: [],
            uploader2: [],
            uploader3: [],
            uploader4: [],
            uploader5: [],
            images1: [],
            images2: [],
            images3: [],
            images4: [],
            images5:[],
            loading: true
        },
        filters: {

        },
        components: {

        },
        mounted() {
            var self = this;

        },
        methods: {
            querySearch(queryString, cb) {

                $.post("/api/models", { name: queryString }, function (_result) {
                    if (_result.status == 200) {

                        var results = _result.data;
                        var arr = [];

                        for (var i = 0; i < results.length; i++) {
                            arr.push({ value: results[i] })
                        }

                        cb(arr);

                    }

                });



            },
            handleSelect(uitem) {

                console.log("uitem",uitem.value);

                this.data.model = uitem.value;


            },
            handleDelete1(uitem, obj) {
                console.log("删除了", uitem, obj)

                this.images1.remove(uitem.url);

            },
            handleDelete2(uitem, obj) {
                console.log("删除了", uitem, obj)

                this.images2.remove(uitem.url);

            },
            handleDelete3(uitem, obj) {
                console.log("删除了", uitem, obj)

                this.images3.remove(uitem.url);

            },
            handleDelete4(uitem, obj) {
                console.log("删除了", uitem, obj)

                this.images4.remove(uitem.url);

            },
            handleDelete5(uitem, obj) {
                console.log("删除了", uitem, obj)

                this.images5.remove(uitem.url);

            },
            afterRead1(file) {
                // 此时可以自行将文件上传至服务器

                var index = layer.load(1, {
                    shade: [0.6, '#000'],  // 透明度和背景颜色
                    time: 0,  // 不自动关闭
                    content: '正在上传中...',  // 显示的文字
                    end: function () {

                    }
                });

                console.log(file);
                console.log("判断1", typeof (file)); 
                var list = [];
                if (Array.isArray(file)) {
                    list = file;
                } else {
                    list = [file];
                
                }



                var that = this;
                console.log("??", list.length);
                for (var i = 0; i < list.length; i++) {

                    console.log("上传", i);
                    var formData = new FormData();
                    formData.append("file", list[i].file);

                    $.ajax({
                        url: '/uploadimg',
                        data: formData,
                        type: "post",
                        dataType: 'json',
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function (data) {
                            console.log("success", data);

                            if (data.status == 200) {
                                //  that.uploader = [{ url: data.data }];
                                that.images1.push(data.data);
                                file.url = data.data;
                                layer.close(index);
                            }

                        },
                        error: function () {
                            console.log("获取失败")
                        }
                    })
                }


            },
            afterRead2(file) {
                // 此时可以自行将文件上传至服务器

                var index = layer.load(1, {
                    shade: [0.6, '#000'],  // 透明度和背景颜色
                    time: 0,  // 不自动关闭
                    content: '正在上传中...',  // 显示的文字
                    end: function () {

                    }
                });

                console.log(file);
                console.log("判断2", typeof (file)); 
                var list = [];
          
                if (Array.isArray(file)) {
                    list = file;
                } else {
                    list = [file];
                
                }

          
                var that = this;
                for (var i = 0; i < list.length; i++) {

                    var formData = new FormData();
                    formData.append("file", list[i].file);

                    $.ajax({
                        url: '/uploadimg',
                        data: formData,
                        type: "post",
                        dataType: 'json',
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function (data) {
                            console.log(data);

                            if (data.status == 200) {
                                //  that.uploader = [{ url: data.data }];

                                that.images2.push(data.data);
                                file.url = data.data;


                                layer.close(index);



                            }

                        },
                        error: function () {
                            console.log("获取失败")
                        }
                    })
                }


            },
            afterRead3(file) {
                // 此时可以自行将文件上传至服务器

                var index = layer.load(1, {
                    shade: [0.6, '#000'],  // 透明度和背景颜色
                    time: 0,  // 不自动关闭
                    content: '正在上传中...',  // 显示的文字
                    end: function () {

                    }
                });

                console.log(file);
                console.log("判断3", typeof (file)); 
                var list = [];
                if (Array.isArray(file)) {
                    list = file;
                } else {
                    list = [file];
                
                }

            
                var that = this;
                for (var i = 0; i < list.length; i++) {

                    var formData = new FormData();
                    formData.append("file", list[i].file);

                    $.ajax({
                        url: '/uploadimg',
                        data: formData,
                        type: "post",
                        dataType: 'json',
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function (data) {
                            console.log(data);

                            if (data.status == 200) {
                                //  that.uploader = [{ url: data.data }];

                                that.images3.push(data.data);
                                file.url = data.data;


                                layer.close(index);



                            }

                        },
                        error: function () {
                            console.log("获取失败")
                        }
                    })
                }


            },
            afterRead4(file) {
                // 此时可以自行将文件上传至服务器

                var index = layer.load(1, {
                    shade: [0.6, '#000'],  // 透明度和背景颜色
                    time: 0,  // 不自动关闭
                    content: '正在上传中...',  // 显示的文字
                    end: function () {

                    }
                });


                console.log(file);
                console.log("判断4", typeof (file)); 
                var list = [];
                if (Array.isArray(file)) {
                    list = file;
                } else {
                    list = [file];
                
                }

                var that = this;
                for (var i = 0; i < list.length; i++) {

                    var formData = new FormData();
                    formData.append("file", list[i].file);

                    $.ajax({
                        url: '/uploadimg',
                        data: formData,
                        type: "post",
                        dataType: 'json',
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function (data) {
                            console.log(data);

                            if (data.status == 200) {
                                //  that.uploader = [{ url: data.data }];

                                that.images4.push(data.data);
                                file.url = data.data;


                                layer.close(index);



                            }

                        },
                        error: function () {
                            console.log("获取失败")
                        }
                    })
                }


            },
            afterRead5(file) {
                // 此时可以自行将文件上传至服务器

                var index = layer.load(1, {
                    shade: [0.6, '#000'],  // 透明度和背景颜色
                    time: 0,  // 不自动关闭
                    content: '正在上传中...',  // 显示的文字
                    end: function () {

                    }
                });

                console.log(file);
                console.log("判断5", typeof (file)); 
                var list = [];
                if (Array.isArray(file)) {
                    list = file;
                } else {
                    list = [file];
                
                }

                var that = this;
                for (var i = 0; i < list.length; i++) {

                    var formData = new FormData();
                    formData.append("file", list[i].file);

                    $.ajax({
                        url: '/uploadimg',
                        data: formData,
                        type: "post",
                        dataType: 'json',
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function (data) {
                            console.log(data);

                            if (data.status == 200) {
                                //  that.uploader = [{ url: data.data }];

                                that.images5.push(data.data);
                                file.url = data.data;


                                layer.close(index);



                            }

                        },
                        error: function () {
                            console.log("获取失败")
                        }
                    })
                }


            },
            getUrlKey: function (name, url) {
                return (
                    decodeURIComponent(
                        (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
                            url
                        ) || [, ""])[1].replace(/\+/g, "%20")
                    ) || null
                );
            },
            insert: function () {
                var that = this;


                console.log("sss", this.images);
                if (this.data.model == "") {

                    that.$toast({
                        message: '请输入品牌型号',
                        position: 'top'
                    });
                    return;
                }


                this.data.imgurl1 = this.images1.join(",");
                this.data.imgurl2 = this.images2.join(",");
                this.data.imgurl3 = this.images3.join(",");
                this.data.imgurl4 = this.images4.join(",");
                this.data.imgurl5 = this.images5.join(",");
                $.post("/api/source/add", this.data, function (_result) {
                    if (_result.status == 200) {

                        that.uploader1 = [];
                        that.uploader2 = [];
                        that.uploader3 = [];
                        that.uploader4 = [];
                        that.uploader5 = [];


                        that.$toast({
                            message: '操作成功',
                            position: 'top'
                        });

                    } else {
                        that.$toast({
                            message: _result.message,
                            position: 'top'
                        });
                    }

                });


            },
            getData() {

                var that = this;
                $.post("/api/types", {}, function (_result) {
                    if (_result.status == 200) {

                        that.columns = _result.data;


                    }

                });




            },
            onConfirm(value) {

                console.log("value", value);

                this.data.type = value;
                this.showPicker = false;
            },
            onConfirm1(value) {

                this.data.model = value;
                this.showPicker1 = false;
            }


        },
        created: function () {  //初始化事件里边去调用查询方法

            this.getData();

        }
    });
</script>

</html>